<template>
	<div>
		<el-button type="primary" size="default" @click="bindAddGoods">添加</el-button>

		<el-table :data="goodsList" style="width: 100%">
			<el-table-column prop="id" label="ID" width="180"> </el-table-column>
			<el-table-column label="图片" width="200">
				<template slot-scope="scope">
					<div>
						<img :src="scope.row.url" alt="pic" style="width: 100px" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="菜品名" width="180"> </el-table-column>
			<el-table-column prop="price" label="价格" width="100"> </el-table-column>
			<el-table-column prop="num" label="数量"> </el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" size="small " @click="">编辑</el-button>
					<el-button type="success" size="small " @click="bindDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加商品 -->
		<el-dialog title="添加商品" :visible.sync="dialogFormVisible">
			<el-form>
				<el-form-item label="商品名称">
					<el-input></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-select placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// import axios from 'axios'
import instance from '../api/axiosService'
export default {
	data() {
		return {
			goodsList: [],
			dialogFormVisible:false
		}
	},
	methods: {
		/**
		 * 商品列表
		 */
		getGoodsList() {
			instance({
				method: 'GET',
				url: '/goods/list',
			}).then(data => {
				// const data = res.data
				if (data.code == 1) {
					this.goodsList = data.list
				}
			})
		},
		/**
		 * 删除
		 */
		bindDelete(id) {
			this.$confirm('确定删除该记录吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					instance({
						method: 'GET',
						url: '/goods/delete',
						params: {
							id,
						},
					}).then(data => {
						// const data = res.data
						if (data.code == 1) {
							this.$message.success(res.data.message)

							this.getGoodsList() //重新获取服务端数据，刷新界面
						}
					})
				})
				.catch(() => {})
		},
		bindAddGoods(){
			this.dialogFormVisible = true
		}
	},
	mounted() {
		this.getGoodsList()
	},
}
</script>

<style lang="css" scoped></style>
